<script setup>
import { reactive } from "vue"
import { Postcard, Notebook } from '@element-plus/icons-vue'

let navs = reactive([
    {
        id: 1, path: "/home/settings", icon: 'icon iconfont icon-shezhi', label: '设置', children: [
            { id: 101, path: "/home/settings_index", icon: Postcard, label: "网站信息" },
            { id: 102, path: "/home/todo_index", icon: Postcard, label: "秘密设置" },
            { id: 103, path: "/home/todo_index", icon: Postcard, label: "邮箱配置" },
            { id: 104, path: "/home/todo_index", icon: Postcard, label: "幻灯片管理" },
            { id: 105, path: "/home/todo_index", icon: Postcard, label: "引导页" },
            { id: 106, path: "/home/todo_index", icon: Postcard, label: "上传设置" },
            { id: 107, path: "/home/todo_index", icon: Postcard, label: "文件存储" },
            { id: 108, path: "/home/todo_index", icon: Postcard, label: "URL美化" },
        ]
    },
    {
        id: 2, path: "/home/user", icon: 'icon iconfont icon-yonghu', label: '用户管理', children: [
            { id: 200, path: "/home/user_index", icon: Postcard, label: "信息统计" },
            { id: 201, path: "/home/user_admin_group", icon: Notebook, label: "管理组", children: [
                { id: 20101, path: "/home/user_role", icon: Postcard, label: "角色管理" },
                { id: 20102, path: "/home/user_admin", icon: Postcard, label: "管理员" },
                { id: 20103, path: "/home/user_logging", icon: Postcard, label: "操作日志" },
            ] },
            
            { id: 202, path: "/home/user_group", icon: Notebook, label: "用户组", children: [
                { id: 20201, path: "/home/user_common", icon: Postcard, label: "本站用户" },
                { id: 20202, path: "/home/user_tag", icon: Postcard, label: "标签管理" },
            ] },
            
        ]
    },
    { id: 3, path: "/home/jiangchi", icon: 'icon iconfont icon-zhibo1', label: '奖池管理' },
    { id: 4, path: "/home/zhubo", icon: 'icon iconfont icon-shenfengzheng2', label: '主播认证' },
    {
        id: 5, path: "/home/zhibo", icon: 'icon iconfont icon-zhibo2', label: '直播管理', children: [
            { id: 500, path: "/home/zhibo_index", icon: Postcard, label: "信息统计" },
            { id: 501, path: "/home/zhibo_fenlei", icon: Postcard, label: "直播分类" },
            { id: 502, path: "/home/todo_index", icon: Postcard, label: "禁播管理" },
            { id: 503, path: "/home/todo_index", icon: Postcard, label: "禁言管理" },
            { id: 504, path: "/home/todo_index", icon: Postcard, label: "踢人管理" },
            { id: 505, path: "/home/todo_index", icon: Postcard, label: "直播列表" },
            { id: 506, path: "/home/todo_index", icon: Postcard, label: "直播监控" },
            { id: 507, path: "/home/todo_index", icon: Postcard, label: "礼物管理" },
            { id: 508, path: "/home/todo_index", icon: Postcard, label: "贴纸列表" },
            { id: 509, path: "/home/todo_index", icon: Postcard, label: "直播记录" },
            { id: 510, path: "/home/todo_index", icon: Postcard, label: "游戏记录" },
            { id: 511, path: "/home/todo_index", icon: Notebook, label: "举报管理", children: [
                { id: 51101, path: "/home/todo_index", icon: Postcard, label: "举报分类" },
                { id: 51102, path: "/home/todo_index", icon: Postcard, label: "举报列表" },
            ] },
            
        ]
    },
    {
        id: 6, path: "/home/shipin", icon: 'icon iconfont icon-zhibo', label: '视频管理', children: [
            { id: 600, path: "/home/shipin_index", icon: Postcard, label: "信息展示" },
            { id: 601, path: "/home/todo_index", icon: Postcard, label: "音乐分类" },
            { id: 602, path: "/home/todo_index", icon: Postcard, label: "音乐管理" },
            { id: 603, path: "/home/todo_index", icon: Postcard, label: "审核通过列表" },
            { id: 604, path: "/home/todo_index", icon: Postcard, label: "待审核列表" },
            { id: 605, path: "/home/todo_index", icon: Postcard, label: "未通过列表" },
            { id: 606, path: "/home/todo_index", icon: Postcard, label: "下架列表" },
            { id: 607, path: "/home/todo_index", icon: Postcard, label: "举报类型" },
            { id: 608, path: "/home/todo_index", icon: Postcard, label: "举报列表" },
        ]
    },
    {
        id: 7, path: "/home/caiwu", icon: 'icon iconfont icon-caiwu', label: '财务管理', children: [
            { id: 700, path: "/home/caiwu_index", icon: Postcard, label: "信息统计" },
            { id: 701, path: "/home/todo_index", icon: Postcard, label: "充值规则" },
            { id: 702, path: "/home/todo_index", icon: Postcard, label: "充值记录" },
            { id: 703, path: "/home/todo_index", icon: Postcard, label: "手动充值" },
            { id: 704, path: "/home/todo_index", icon: Postcard, label: "消费记录" },
            { id: 705, path: "/home/todo_index", icon: Postcard, label: "提现记录" },
            { id: 706, path: "/home/todo_index", icon: Postcard, label: "商户体现记录" },
            { id: 707, path: "/home/todo_index", icon: Postcard, label: "财务报表" },
        ]
    },
    {
        id: 8, path: "/home/jiazu", icon: 'icon iconfont icon-jiazu', label: '家族管理', children: [
            { id: 800, path: "/home/jiazu_index", icon: Postcard, label: "信息统计" },
            { id: 801, path: "/home/todo_index", icon: Postcard, label: "家族列表" },
            { id: 802, path: "/home/todo_index", icon: Postcard, label: "成员管理" },
        ]
    },
    {
        id: 9, path: "/home/daoju", icon: 'icon iconfont icon-daoju', label: '道具管理', children: [
            { id: 900, path: "/home/daoju_index", icon: Postcard, label: "信息统计" },
            { id: 901, path: "/home/todo_index", icon: Postcard, label: "坐骑管理" },
            { id: 902, path: "/home/todo_index", icon: Postcard, label: "靓号管理" },
            { id: 903, path: "/home/todo_index", icon: Postcard, label: "VIP管理" },
        ]
    },
    { id: 10, path: "/home/hongbao", icon: 'icon iconfont icon-hongbao', label: '红包管理' },
    { id: 11, path: "/home/shouhu", icon: 'icon iconfont icon-dunpai', label: '守护管理' },
    {
        id: 12, path: "/home/dengji", icon: 'icon iconfont icon-jiangpai-guanjun-F', label: '等级管理', children: [
            { id: 1200, path: "/home/dengji_index", icon: Postcard, label: "信息统计" },
            { id: 1201, path: "/home/todo_index", icon: Postcard, label: "用户等级" },
            { id: 1202, path: "/home/todo_index", icon: Postcard, label: "主播等级" },
        ]
    },
    {
        id: 13, path: "/home/yaoqing", icon: 'icon iconfont icon-jiangpai-guanjun-F', label: '邀请奖励', children: [
            { id: 1300, path: "/home/yaoqingma_index", icon: Postcard, label: "信息统计" },
            { id: 1301, path: "/home/todo_index", icon: Postcard, label: "邀请关系" },
            { id: 1302, path: "/home/todo_index", icon: Postcard, label: "邀请收益" },
        ]
    },
    {
        id: 14, path: "/home/dazhuanpan", icon: 'icon iconfont icon-dazhuanpan', label: '大转盘', children: [
            { id: 1400, path: "/home/dazhuanpan_index", icon: Postcard, label: "信息统计" },
            { id: 1401, path: "/home/todo_index", icon: Postcard, label: "价格管理" },
            { id: 1402, path: "/home/todo_index", icon: Postcard, label: "奖品管理" },
            { id: 1403, path: "/home/todo_index", icon: Postcard, label: "转盘记录" },
            { id: 1404, path: "/home/todo_index", icon: Postcard, label: "线下奖品" },
        ]
    },
    { id: 15, path: "/home/denglujiangli", icon: 'icon iconfont icon-yaoqingyouli', label: '登录奖励' },
    {
        id: 16, path: "/home/xiaoxi", icon: 'icon iconfont icon-xiaoxi', label: '消息管理', children: [
            { id: 1600, path: "/home/xiaoxi_index", icon: Postcard, label: "信息统计" },
            { id: 1601, path: "/home/todo_index", icon: Postcard, label: "验证码管理" },
            { id: 1602, path: "/home/todo_index", icon: Postcard, label: "推送管理" },
            { id: 1603, path: "/home/todo_index", icon: Postcard, label: "直播间消息" },
        ]
    },
    {
        id: 17, path: "/home/neirong", icon: 'icon iconfont icon-neirongguanli', label: '内容管理', children: [
            { id: 1700, path: "/home/neirong_index", icon: Postcard, label: "信息统计" },
            { id: 1701, path: "/home/todo_index", icon: Postcard, label: "用户反馈" },
            { id: 1702, path: "/home/todo_index", icon: Postcard, label: "页面管理" },
        ]
    },
    {
        id: 18, path: "/home/chajian", icon: 'icon iconfont icon-chajian', label: '插件中心', children: [
            { id: 1800, path: "/home/chajian_index", icon: Postcard, label: "信息统计" },
            { id: 1801, path: "/home/todo_index", icon: Postcard, label: "插件列表" },
            { id: 1802, path: "/home/todo_index", icon: Postcard, label: "钩子管理" },
        ]
    },
    {
        id: 19, path: "/home/gouwu", icon: 'icon iconfont icon-shangcheng2', label: '购物商城', children: [
            { id: 1900, path: "/home/gouwu_index", icon: Postcard, label: "信息统计" },
            { id: 1901, path: "/home/todo_index", icon: Postcard, label: "分类管理" },
            { id: 1902, path: "/home/todo_index", icon: Postcard, label: "快递公司" },
            { id: 1903, path: "/home/todo_index", icon: Postcard, label: "店铺管理" },
            { id: 1904, path: "/home/todo_index", icon: Postcard, label: "商品管理" },
            { id: 1905, path: "/home/todo_index", icon: Postcard, label: "优惠券" },
            { id: 1906, path: "/home/todo_index", icon: Postcard, label: "地区管理" },
            { id: 1907, path: "/home/todo_index", icon: Postcard, label: "订单列表" },
            { id: 1908, path: "/home/todo_index", icon: Postcard, label: "订单纠纷" },
            { id: 1909, path: "/home/todo_index", icon: Postcard, label: "订单评论" },
            { id: 1910, path: "/home/todo_index", icon: Postcard, label: "退货/退款设置" },
        ]
    },
    { id: 20, path: "/home/quanzi", icon: 'icon iconfont icon-quanzi', label: '圈子' },
])

defineProps('collapse')
</script>
<template>
    <!-- 侧边栏导航 -->
    <el-menu :collapse="collapse" :default-active="$route.path" unique-opened active-text-color="#ffd04b" background-color="#545c64"
        class="el-menu-vertical-demo" default-active="2" text-color="#fff" @open="handleOpen" router
        @close="handleClose">

        <template v-for="nav in navs" :key="nav.id">
            <el-sub-menu :index="nav.path" v-if="nav.children">
                <template #title>
                    <el-icon><i :class="nav.icon"></i></el-icon>
                    <span>{{ nav.label }}</span>
                </template>
                <template v-for="n in nav.children">
                    <el-sub-menu :index="n.path" v-if="n.children">
                        <template #title>
                            <el-icon><component :is="n.icon"></component></el-icon>
                            <span>{{ n.label }}</span>
                        </template>
                        <el-menu-item :index="x.path" v-for="x in n.children">
                            <el-icon><component :is="x.icon"></component></el-icon>
                            <span>{{ x.label }}</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item :index="n.path" v-else>
                        <el-icon><component :is="n.icon"></component></el-icon>
                        <span>{{ n.label }}</span>
                    </el-menu-item>
                </template>
                
            </el-sub-menu>
            <el-menu-item :index="nav.path" v-else>
                <el-icon>
                    <i :class="nav.icon"></i>
                </el-icon>
                <span>{{ nav.label }}</span>
            </el-menu-item>
        </template>


        <!-- <el-sub-menu>
            <template #title>
                <el-icon><i class=""></i></el-icon>
                <span></span>
            </template>
            <el-menu-item index="">
                <el-icon><i></i></el-icon>
                <span></span>
            </el-menu-item>
        </el-sub-menu> -->

        <!-- <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <i class="icon iconfont icon-menu_yhsz"></i>
                </el-icon>
                <span>用户管理</span>
            </template>
            <el-menu-item index="/home/usergroup">
                <el-icon>
                    <i class="icon iconfont icon-user-group"></i>
                </el-icon>
                管理用户组</el-menu-item>
            <el-menu-item index="/home/user">
                <el-icon>
                    <i class="icon iconfont icon-yonghu"></i>
                </el-icon>
                管理用户</el-menu-item>
        </el-sub-menu> -->


        <el-menu-item index="/login">
            <el-icon>
                <document />
            </el-icon>
            <span>安全退出</span>
        </el-menu-item>

    </el-menu>
</template>
<style scoped>
@import url('../assets/iconfont.css');

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 280px;
}

.el-menu {
    height: 100%;
    overflow-y: auto;
}

.el-menu::-webkit-scrollbar {
    /* position:absolute; */
    /* left:0; */
    width: 2px;

}

.el-menu::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 3px;
}

.el-menu::-webkit-scrollbar-thumb:hover {
    background-color: #d1f1f1;
}

.el-menu-item.logo {
    height: 60px;
    background-color: #123456;
    color: white;
    letter-spacing: 3px;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
}

.el-menu-item.is-active {
    background-color: #abcdef;
    color: #123456;
}
</style>